/**
 * 增加链接
 */
Vue.component("link-add", {
    template :
        `
        <div>
            <i-button type="text" icon="ios-plus-empty" @click="showAddLink = true">增加链接</i-button>
            <Modal v-model="showAddLink" title="增加redis链接...">
                <i-form ref="addLinkForm" :model="addLinkForm" :rules="addLinkFormValidate" :label-width="80">
                    <Form-item label="Name : " prop="name">
                        <i-input v-model="addLinkForm.name" placeholder="请输入名称..." autofocus="true"></i-input>
                    </Form-item>
                    <Form-item label="Host : " prop="host">
                        <i-input v-model="addLinkForm.host" placeholder="请输入主机地址..."></i-input>
                    </Form-item>
                    <Form-item label="Port : " prop="port">
                        <i-input v-model="addLinkForm.port" placeholder="请输入端口..."></i-input>
                    </Form-item>
                    <Form-item label="Auth : " prop="auth">
                        <i-input v-model="addLinkForm.auth" placeholder="请输入密码..."></i-input>
                    </Form-item>
                </i-form>
                <div slot="footer">
                    <i-button type="primary" @click="addLinkOk('addLinkForm')">提交</i-button>
                    <i-button type="ghost" @click="addLinkReset('addLinkForm')" style="margin-left: 8px">重置</i-button>
                </div>
            </Modal>
        </div>        
        `,
    props : ["addLinkForm","addLinkFormValidate"],
    data : function () {
        return {
            showAddLink : false
        };
    },
    methods : {
        addLinkOk : function (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //保存链接
                    var value = this.addLinkForm.name + "," + this.addLinkForm.host + "," + this.addLinkForm.port + "," + this.addLinkForm.auth;
                    var link = {
                        value : value,
                        name : this.addLinkForm.name,
                        detail : this.addLinkForm.host + ":" + this.addLinkForm.port
                    };
                    this.$emit("addLink", link);
                    //关闭窗口
                    this.showAddLink = false;
                    //重置form
                    this.$refs[name].resetFields();
                    this.$Message.success("redis链接增加成功...");
                } else {
                    this.$Message.error("表单验证失败!");
                }
            });
        },
        addLinkReset : function (name) {
            this.$refs[name].resetFields();
        }
    }
});